<template>
  <view class="page-container">
    <!-- 顶部美食横幅 -->
    <view class="food-banner">
      <image 
        src="/static/images/02.jpg" 
		mode="aspectFill"
        class="banner-img"
      ></image>
      <view class="banner-text">
		<text class="main-title">香气四溢的玉竹</text>
		<text class="sub-title">一口鲜香玉竹，舌尖上的滋味无法抗拒</text>

      </view>
    </view>

    <!-- 搜索框 -->
    <view class="search-box">
      <uni-icons type="search" size="18" color="#999" class="search-icon"></uni-icons>
      <text class="search-placeholder">今天想吃点什么？</text>
    </view>

    <!-- 分类导航 -->
    <view class="category-nav">
      <scroll-view scroll-x class="category-scroll" show-scrollbar="false">
        <view class="category-items" v-for="(item,index) in tagsList" :key="index" >
			<view class="category-item" :class="{active:index===0}" @click="goToCategory(item.name)">
				<text>{{item.name}}</text>
			</view>
        </view>
      </scroll-view>
    </view>

    <!-- 推荐菜谱 -->
    <view class="recipe-section">
      <view class="section-title">推荐菜谱</view>
      <view class="recipe-grid">
        <view class="recipe-card" v-for="(recipe, index) in recipesList" :key="index" @click="goToDetail(recipe.id)">
          <image :src="recipe.cover_image" mode="aspectFill" class="recipe-img"></image>
          <view class="recipe-info">
            <text class="recipe-name">{{ recipe.title }}</text>
            <view class="recipe-meta">
              <text class="difficulty">{{ recipe.difficulty }}</text>
              <text class="time">{{ recipe.cook_time }}分钟</text>
            </view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import {getMenuList, getMenuTags} from '/apis/index.js'

// 路由实例
const router = useRouter();

const recipesList = ref([]) // 推荐菜谱数据
const tagsList = ref([])
const activeCategory = ref('中餐'); // 当前选中的分类

// 页面加载自动获取
onMounted(async()=>{
	try{
		await Promise.all([
			getMenuListData(),
			getMenuTagsData()
		])
	}catch(err){
		console.log("数据加载失败：",err)
	}
})

// 获取菜单菜谱数据（推荐)
const getMenuListData = async() => {
	try {
		const data = await getMenuList()
		recipesList.value = data
	}catch(err) {
		console.log("获取菜单失败：",err)
	}
}

// 获取菜单标签分类
const getMenuTagsData = async() => {
	try {
		const data = await getMenuTags()
		tagsList.value = data
	}catch(err){
		console.log("获取菜单分类失败：",err)
	}
}

// 进入菜谱详细页
const goToDetail = (id) => {
	uni.navigateTo({
		url:`/pages/detail/detail?id=${id}`
	})
}

// 进入分类详细页
const goToCategory = (type_name) => {
	activeCategory.value = type_name
	uni.navigateTo({
		url:`/pages/category/category?type=${type_name}`
	})
}
</script>

<style lang="scss" scoped>
// 顶部美食横幅
.food-banner {
  position: relative;
  overflow: hidden;
  
  .banner-img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    transform: scale(1.05);
  }
  
  .banner-text {
    position: absolute;
    bottom: 30px;
    left: 20px;
    right: 20px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    
    .main-title {
      font-size: 22px;
      font-weight: bold;
      display: block;
      margin-bottom: 8px;
      line-height: 1.3;
    }
    
    .sub-title {
      font-size: 16px;
      opacity: 0.9;
    }
  }
}

// 搜索框样式
.search-box {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 30px;
  padding: 12px 20px;
  margin: -25px 20px 20px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  position: relative;
  z-index: 10;
  
  .search-icon {
    margin-right: 10px;
  }
  
  .search-placeholder {
    color: #999;
    font-size: 16px;
    flex: 1;
  }
}

// 分类导航样式
.category-nav {
  padding: 0 15px;
  margin-bottom: 20px;
  
  .category-scroll {
    width: 100%;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    
    // 隐藏WebKit浏览器的滚动条
    ::-webkit-scrollbar {
      display: none;
    }
    
    // 隐藏Firefox浏览器的滚动条
    scrollbar-width: none;
    
    .category-items {
      display: inline-flex;
      gap: 15px;
      padding: 8px 0;
      
      .category-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px 12px;
        background-color: #fff;
        border-radius: 10px;
        font-size: 16px;
        color: #666;
        min-width: 70px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        transition: all 0.3s;
        
        uni-icons {
          margin-bottom: 5px;
        }
        
        &.active {
          background-color: #ff6b6b;
          color: #fff;
          box-shadow: 0 4px 10px rgba(255,107,107,0.3);
        }
      }
    }
  }
}

// 推荐菜谱区域
.recipe-section {
  padding: 0 15px 15px;
  
  .section-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    padding-left: 5px;
    border-left: 3px solid #ff6b6b;
  }
  
  .recipe-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    
    .recipe-card {
      background-color: #fff;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 3px 8px rgba(0,0,0,0.05);
      transition: transform 0.3s;
      
      &:hover {
        transform: translateY(-3px);
      }
      
      .recipe-img {
        width: 100%;
        height: 160px;
        object-fit: cover;
      }
      
      .recipe-info {
        padding: 12px;
        
        .recipe-name {
          font-size: 16px;
          font-weight: 500;
          color: #333;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
          margin-bottom: 8px;
        }
        
        .recipe-meta {
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
}

</style>
